// 进度条元素
const progress = document.getElementById('progress');
// 获取步骤数组
const steps = document.querySelectorAll('.step');
// 上一步按钮
const prev = document.getElementById('prev');
// 下一步按钮
const next = document.getElementById('next');
// 控制进度条的进度
let currentStep = 1;

// 上一步按钮添加监听事件
prev.addEventListener('click', () => {
  currentStep--;
  // 计算进度条的宽度
  calcProgress();
  console.log('prev', currentStep);
  // 去除step的active样式
  steps.forEach((step, index) => {
    // 判断当前下标是否大于当前进度条的位置时，去除active的样式
    if (index >= currentStep) {
      step.classList.remove('active');
    }
  });
  // 设置按钮的点击状态
  setBtnStaus();
});

// 下一步按钮添加监听事件
next.addEventListener('click', () => {
  currentStep++;
  // 计算进度条的宽度
  calcProgress();
  console.log('next', currentStep);
  // 去除step的active样式
  steps.forEach((step, index) => {
    // 判断当前下标是否小于于当前进度条的位置时，添加active的样式
    if (index < currentStep) {
      step.classList.add('active');
    }
  });
  // 设置按钮的点击状态
  setBtnStaus();
});

// 设置按钮的点击状态
const setBtnStaus = () => {
  prev.disabled = currentStep === 1;
  next.disabled = currentStep === 4;
};

// 计算进度条的宽度
const calcProgress = () => {
  progress.style.width =
    Math.floor(((currentStep - 1) / (steps.length - 1)) * 100) + '%';
  console.log(steps.length);
  console.log(progress.style.width);
};
